<template>
  <view class="coupon">
    <u-subsection :list="list" :current="current" keyName="name" fontSize="14" activeColor="#CDAF67" bgColor="#fafafa" @change="sectionChange"></u-subsection>

    <swiper class="swiper">
      <swiper-item>
        <u-grid col="1">
          <u-grid-item v-for="(item, index) in swiperList" :key="index">
            <u-row customStyle="margin-top: 10px;width: 100%;">
              <image mode="aspectFill" style="height: 214rpx;" src="https://mm.wentsoft.com/images/coupon_bg.png" />
            </u-row>
          </u-grid-item>
        </u-grid>
      </swiper-item>
    </swiper>
    <u--text suffixIcon="arrow-right" iconStyle="font-size: 16px;color: #aaaaaa;" block color="#aaaaaa" text="查看更多"></u--text>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
      list: [{
        id: 1,
        name: '未付款'
      }, {
        id: 2,
        name: '待评价'
      }, {
        id: 3,
        name: '已付款'
      }
      ],
      current: 1
    }
  },
  methods: {
    sectionChange(index) {
      this.current = index;
    }
  }
}
</script> 

<style lang="scss" scoped>
.coupon {
  padding: 10rpx 10rpx 50rpx 10rpx;
  background-color: #fafafa;
}
.swiper {
  height: 720rpx;
}
</style>
